<template>
  <div class="question">
    <van-nav-bar
      v-if="$route.query.hideH5Nav=='false'"
      :title="t('question.pageTitle')"
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
    <div :class="$route.query.hideH5Nav=='false'?'header navStyle':'header'">
      <div class="header-left">
        <p class="title">{{ $t("question.text1") }}</p>
      </div>
      <div class="header-right">
        <img src="/image/question/header-bg.png" alt="">
      </div>
    
    <div class="content">
      <div class="group">
        <p class="ques">{{ $t("question.text3") }}</p>
        <p class="describe">
          {{ $t("question.text4") }}
        </p>
      </div>
      <div class="group">
        <p class="ques">{{ $t("question.text5") }}</p>
        <p class="title">{{ $t("question.text6") }}</p>
        <ol>
          <li class="describe">{{ $t("question.text7") }}</li>
          <li class="describe">{{ $t("question.text8") }}</li>
          <li class="describe">{{ $t("question.text9") }}</li>
          <li class="describe">{{ $t("question.text10") }}</li>
          <li class="describe">{{ $t("question.text11") }}</li>
        </ol>
      </div>

      <div class="group">
        <p class="ques">{{ $t("question.text12") }}</p>
        <p class="title">{{ $t("question.text13") }}</p>
        <ol>
          <li class="describe">{{ $t("question.text14") }}</li>
          <li class="describe">{{ $t("question.text16") }}</li>
          <li class="describe">{{ $t("question.text17") }}</li>
          <li class="describe">{{ $t("question.text18") }}</li>
        </ol>
      </div>

      <div class="group">
        <p class="ques">{{ $t("question.text19") }}</p>
        <p class="describe">{{ $t("question.text20") }}</p>
        <p class="describe">{{ $t("question.text21") }}</p>
      </div>

      <div class="group">
        <p class="ques">{{ $t("question.text22") }}</p>
        <p class="describe">
          {{ $t("question.text23") }}
        </p>
      </div>
      <div class="group">
        <p class="ques">{{ $t("question.text24") }}</p>
        <p class="describe">
          {{ $t("question.text25") }}
        </p>
      </div>
      <div class="group">
        <p class="ques">{{ $t("question.text26") }}</p>
        <p class="describe">
          {{ $t("question.text27") }}
        </p>
      </div>

      <div class="group2">
        <p class="tips">
          {{ $t("question.text28") }}
        </p>
      </div>
    </div>
  </div>
    
  </div>
</template>
<script setup>
const { t } =  useI18n();
const $router = useRouter(); // 路由跳转
const onClickLeft = () =>{
  $router.go(-1)
}


</script>
<style lang="scss" scoped>
.question{
  background: linear-gradient(180deg, #E5F1FF 0%, #ebedf0 100%);
  height: 100vh;
  overflow-y: scroll;
  .navStyle{
    margin-top: 94px;
  }
  .header{
    display: flex;
    justify-content: space-between;
    padding: 40px 50px;
    position: relative;
    
    .header-left{
      width: 70%;
      font-size: 48px;
      margin-top: 40px;
      .title{
        color: var(--Dark-Blue, #002853);
        font-size: 48px;
        line-height: 60px;
      }
      .supplyCon{
        color: #F90;
        font-weight: 700;
        line-height: 1.875rem;
      }
    }
    .header-right{
      width: 260px;
      height: 200px;
      overflow: hidden;
      img{
        width: 100%;
      }
    }

 
    .content{
      padding: 0 30px;
      position: absolute;
      top: 240px;
      left: 0;
      .group{
        padding: 30px;
        background: #fff;
        border-radius: 24px;
        margin-bottom: 20px;
        ol{
          list-style: normal!important;
          margin-left: 30px;
          margin-top: 10px;
        }
      }

      .group2{
        margin-top: 20px;
        padding-bottom: 100px;
        .tips{
          font-weight: 400;
          line-height: 36px;
          font-size: 26px;
          color: var(--Gray, #797C83);
        }
      }

    }
  }
}
.ques{
  color: var(--Brand-Blue, #007BFF);
  font-size: 34px;
  font-weight: 590;
  line-height: 44px; 
  margin-bottom: 20px;
}

.title{
  color: var(--Black-Blue, #141924);
  font-weight: 590;
  line-height: 40px;
  font-size: 30px;
}
.describe{
  color: var(--Black-Blue, #141924);
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  font-weight: 400;
}


</style>
